<template>
<!--  <div class="operate_box">-->
<div style="display: inline;">
      <div class="operate_item">
            <span v-for="(item,index) in timeOptions" :key="index"
                  :class="timeIndex == item.id ? 'time_selected operate_btn':'operate_btn time_btn'"
                  @click="getTime(item.id)">{{ item.name }}</span>
      </div>

      <div class="operate_item">
        <label>时间：</label>
        <el-date-picker
          v-model="proDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="resetTimeType">
        </el-date-picker>
      </div>

    <!--只有首页显示这两个按钮-->
      <div class="operate_item" v-if="type === 1">
        <span class="operate_btn search_btn" @click="searcData">查询</span>
        <span class="operate_btn reset_btn" @click="resetTable">重置</span>
      </div>
  </div>


</template>

<script>

export default {
//proTime：父组件传过来的时间
  props: ['type','proTime'],
  data() {
    return {
      timeOptions: [{id: 1, name: '今天'}, {id: 2, name: '昨天'}, {id: 3, name: '本周'}, {id: 4, name: '上周'}, {
        id: 5,
        name: '本月'
      }, {id: 6, name: '上月'}],
      proDate: '',
      timeIndex: 2,
      timeDate: '',
      value: '',
      isFirst:true
    }
  },
  mounted() {
    this.getDayTime(-1)
  },
  methods: {
    //将时间传给父组件
    toParent() {
      this.$emit('getTime', {date: this.proDate,isFirst:this.isFirst});
    },
    resetTimeType() {
      this.timeIndex = 0;
    },

    searcData() {
      this.toParent();
    },
    resetTable() {
      this.getDayTime(-1);
      this.timeIndex = 2;
    },
    //type: 0 今天 1：明天 -1:昨天
    getDayTime(dates) {
      let dd = new Date();
      let n = dates || 0;
      dd.setDate(dd.getDate() + n);
      let y = dd.getFullYear();
      let m = dd.getMonth() + 1;
      let d = dd.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      let day = y + "-" + m + "-" + d;
      this.proDate = [day, day]
    },
    getTime(timeType) {
      this.timeType = this.timeIndex = timeType;
      if (timeType == 1) {
        this.isFirst = false;
        this.getDayTime(0)
      } else if (timeType === 2) {
        this.getDayTime(-1)
      } else if (timeType === 3) {
        //本周
        this.getWeek('', 0)
      } else if (timeType === 4) {
        this.getWeek('', -1)
      } else if (timeType === 5) {
        this.getMonth('', 0);
      } else {
        this.getMonth('', -1);
      }
      // this.toParent();

    },

    //获取本周、上周的日期 type:s为开始日期 ，e为结束日期
    // date:0为本周，1为上周，1为下周
    getWeek(type, dates) {
      this.isFirst = false;
      let now = new Date();
      let nowTime = now.getTime();
      let day = now.getDay();
      let longTime = 24 * 60 * 60 * 1000;
      let n = longTime * 7 * (dates || 0);
      let start = '';
      let end = '';
      start = nowTime - (day - 1) * longTime + n;
      end = nowTime + (7 - day) * longTime + n;
      start = new Date(start);
      end = new Date(end);
      let startTime = this.getDetailWeek(start);
      let endTime = this.getDetailWeek(end);
      this.proDate = [startTime, endTime]
    },
    //具体计算本周，上周
    getDetailWeek(timeType) {
      let y = timeType.getFullYear();
      let m = timeType.getMonth() + 1;
      let d = timeType.getDate();
      m = m < 10 ? "0" + m : m;
      d = d < 10 ? "0" + d : d;
      let time = y + "-" + m + "-" + d;
      return time;
    },
    //获取月
    // type:s开始，e为结束
    //months:0本月，-1上月，1下月
    getMonth(type, months) {
      this.isFirst = false;
      let d = new Date();
      let year = d.getFullYear();
      let month = d.getMonth() + 1;
      if (Math.abs(months) > 12) {
        months = months % 12;
      }
      ;
      if (months != 0) {
        if (month + months > 12) {
          year++;
          month = (month + months) % 12;
        } else if (month + months < 1) {
          year--;
          month = 12 + month + months;
        } else {
          month = month + months;
        }
        ;
      }
      ;
      month = month < 10 ? "0" + month : month;
      let date = d.getDate();
      let firstday = year + "-" + month + "-" + "01";
      let lastday = "";
      if (month == "01" || month == "03" || month == "05" || month == "07" || month == "08" || month == "10" || month == "12") {
        lastday = year + "-" + month + "-" + 31;
      } else if (month == "02") {
        if ((year % 4 == 0 && year % 100 != 0) || (year % 100 == 0 && year % 400 == 0)) {
          lastday = year + "-" + month + "-" + 29;
        } else {
          lastday = year + "-" + month + "-" + 28;
        }
        ;
      } else {
        lastday = year + "-" + month + "-" + 30;
      }
      ;
      let startTime = "";
      let endTime = "";
      startTime = firstday;
      endTime = lastday;
      this.proDate = [startTime, endTime]
    },
  },
  watch: {
    proDate(newP, oldP) {
      this.toParent();
    },
    proTime() {
      //监听父组件传过来的时间
      this.proDate = this.proTime;
      this.timeIndex = 2;
    },
  }
}
</script>

<style scoped>
.time_btn {
  margin-right: 15px;
  border: 1px solid gainsboro;
}

.time_selected {
  margin-right: 15px;
  border: 1px solid #6687f9;
}
</style>
